<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/layui/css/layui.css" />
    <link rel="stylesheet" href="./css/bootstrap.css" />
  
    <!-- <link rel="stylesheet" href="./css/sortable.min.css" /> -->
    <style>
      .navbar-header {
        width: 700px;
        margin: 0 auto;
        float: none;
      }
      .navbar-brand {
        font-size: 24px;
      }

      .projects-header {
        margin-top: 61px;
        text-align: center;
      }

      [data-sjsel] {
        top: auto;
        opacity: 1;
      }

      select,
      input,
      textarea {
        height: 34px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        cursor: pointer;
        outline: none;
        padding-left: 4px;
      }
      .form-group {
        margin: 10px;
      }

      #row {
        display: flex;
        flex-wrap: wrap;
      }

      .projects-header {
        text-align: left;
      }
      label {
        margin: 0 10px;
      }
      .caption p{
        font-size: 13px;
        color: #5c5c5c;
        margin: 10px 0 0 0;
      }
      .caption hr{
        margin: 0;
        
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <!-- 顶部菜单 -->
      <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
          <a class="navbar-brand hidden-sm">项目描述生成</a>
        
        </div>
      </div>

      <!-- 条件定制区 -->
      <div class="projects-header page-header">
        <p>
          使用本系统之前，请自己先查找好项目名字和项目描述填写到对应位置，系统会根据你选择的技术框架和项目模块自动生成项目描述
          <a href="./post.html">点击进入到项目提交页面</a>
        </p>
        <hr />
        <form class="form">
          <div class="form-group">
            <!-- <label for="exampleInputName2">项目名称</label>
            <input
              type="text"
              style="width: 300px"
              data-toggle="tooltip"
              data-placement="top"
              title="项目名称必须按照行业或公司+类型+属性的组合命名"
              placeholder="例如：美的返修订单管理系统（PC端）"
            /> -->

            <label for="exampleInputName2">项目周期</label>
            <select name="" id="projecttime">
              <option value="1">1个月</option>            
            </select>

            <label for="exampleInputName2">技术框架</label>
            <select name="" id="Framework">              
              <option value="1">Vue</option>
          
            </select>

            <label for="exampleInputName2">项目大类</label>
            <select name="" id="projectType1">
              <option value="-1">--请选择项目类型--</option>
              <option value="1">OA类型后台管理系统</option>
              <option value="2">商城后台管理系统</option>
            </select>
          </div>

          <div class="form-group">
            <label for="exampleInputName2">项目小类</label>
            <div
              id="selectDemo"
              class="xm-select-demo"
              style="
                width: 920px;
                display: inline-block;
                vertical-align: middle;
              "
            ></div>

            <button
            type="button"
            id="btnquery"
            class="btn btn-success btn-lg"
            style="margin-left: 40px"
          >
            查询
          </button>
          </div>
          <div class="form-group">
            <!-- <label for="exampleInputName2">项目描述</label>
            <textarea
              type="text"
              style="vertical-align: middle; height: 80px; width: 600px"
              data-toggle="tooltip"
              data-placement="right"
              title="请填写项目描述部分内容，通常是介绍这个项目解决的问题，所用的技术是什么"
            ></textarea> -->

           
          </div>
        </form>
      </div>

      <!-- 项目描述列表 -->
      <div>
        <div class="row" id="row" class="sjs-default">
       
          <!-- <div data-sjsel="flatty" class="col-sm-6 col-md-4 col-lg-3 item">
            <div class="thumbnail" style="height: auto">
              <div class="caption">
               <p> <strong>项目名称：</strong>优贝商城 （PC端）</p><hr>
               <p><strong> 周期：</strong>4个月</p><hr>
               <p><strong> 项目技术：</strong>Vue2全家桶、git、Axios、Vuex</p><hr>
                <p><strong>项目内容：</strong>该项目是一个 PC
                  端购买商城，主要功能模块有登陆，商品分类，商品列表，商品详情，购物车，支付模块，个人中心，整体项目利用
                  Vue、Vue-Router、Vuex、Axios 等技术完成，采用前后端分离式开发</p>
                <p><hr>
                  <p><strong>负责模块：</strong>商品分类、商品详情，购物车等模块</p><hr>
                  <p>
                  <strong>职责：</strong>
                  <p>1、该项目主要使用 Vue.js 框架，使用 Vue-cli
                    脚手架快速开始模版，配合 Element-UI 组件库完成开发</p>
                  <p>2、使用
                    Vue-Router
                    添加嵌套路由功能，使用声明式导航和编程式导航完成页面的跳转 </p>                 
                </p>
              </div>
            </div>
          </div> -->
          <div data-sjsel="flatty" class="col-sm-6 col-md-4 col-lg-3 item">
            <div class="thumbnail" style="height: auto">
              <div class="caption">
               <p> <strong>项目名称：</strong>优贝商城 （PC端）</p><hr>
               <p><strong> 周期：</strong>4个月</p><hr>
               <p><strong> 项目技术：</strong>Vue2全家桶、git、Axios、Vuex</p><hr>
                <p><strong>项目内容：</strong>该项目是一个 PC
                  端购买商城，主要功能模块有登陆，商品分类，商品列表，商品详情，购物车，支付模块，个人中心，整体项目利用
                  Vue、Vue-Router、Vuex、Axios 等技术完成，采用前后端分离式开发</p>
                <p><hr>
                  <p><strong>项目模块：</strong>商品分类、商品详情，购物车等模块</p><hr>
                  <p>
                  <strong>职责：</strong>
                  <p>1、该项目主要使用 Vue.js 框架，使用 Vue-cli
                    脚手架快速开始模版，配合 Element-UI 组件库完成开发</p>
                  <p>2、使用
                    Vue-Router
                    添加嵌套路由功能，使用声明式导航和编程式导航完成页面的跳转 </p>                 
                </p>
              </div>
            </div>
          </div>

          


        </div>
      </div>
    </div>

    <script src="./lib/jquery-1.12.2.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./lib/xm-select.js"></script>
    <script src="./lib/layer/layer.js"></script>
    <script src="./js/index.js"></script>
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();       
      });

      
    </script>
  </body>
</html>
